<template>
	<div>
		<Button icon="plus" @click="addData">添加</Button>
        <Button icon="trash-a" @click="deleSelectData">选中删除</Button>
        <Input v-model="filter.content">
            <Button slot="append" icon="ios-search" @click="search"></Button>
        </Input>
        <Table border ref="selection" :columns="columns1" :data="list" style="margin-top:10px;" @on-selection-change="getIds"></Table>
        <Page :total="filter.total" size="small" show-total show-elevator show-sizer :page-size="2" :page-size-opts="[2,4,6,8]" @on-change="changePage" @on-page-size-change="changePageSize" style="margin-top:15px;"></Page>	
		<Modal
	        v-model="modal1"
	        title="添加/修改新闻"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        
		        <FormItem label="评论内容" prop="content">
		            <quill-editor v-model="formValidate.content" ref="myQuillEditor">
                    </quill-editor>
		        </FormItem>
                <FormItem label="评分" prop="rate">
                    <Row>
                        <Col span="12">
                            <Rate show-text allow-half v-model="formValidate.rate">
                                <span style="color: #f5a623">{{ formValidate.rate }}</span>
                            </Rate>
                        </Col>
                    </Row>
                </FormItem>
		        <FormItem>
		            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
		            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>		            
		        </FormItem>
		    </Form>
	    </Modal>
		
	</div>
</template>

<script>
	import Base from '../../common/Base.js'
	import { quillEditor } from 'vue-quill-editor'
	export default {
		components: {
            quillEditor
        },
		mixins:[Base],
		data(){
			return {
				module:'comment',
				columns1: [
                	{
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户',
                        key: 'userId',
                       
                    },
                    {
                        title: '评论内容',
                        key: 'content',
                       
                    },
                    {
                        title: '所属新闻',
                        key: 'newsId',
                        
                    },
                    {
                        title: '评论时间',
                        key: 'date',
                       
                    },
                    {
                        title: '评分',
                        key: 'rate',
                       
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 180,
                        render: (h, params) => {
                            return h('div', [
                            	h('Button', {
                                    props: {
                                        type: 'text',
                                        icon: 'eye'
                                    },
                                    on: {
                                        click: () => { 
                                        	//console.log(params);
                                            this.show(params.index)
                                        }
                                    }     
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        icon: 'edit'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'large',
                                        icon: 'trash-a'
                                    },
                                    on: {
                                        click: () => {
                                        	this.deleData(params.row._id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                formValidate: {
                    userId:null,
                    newsId:null,
                    content:'',
                    rate:0
                },
                ruleValidate: {
                    content: [
                        { required: true, message: '评论内容不能为空', trigger: 'blur' }
                    ]
                    
                }
			}
		},
		methods:{
			show(index){
				this.$Modal.info({
                    title: '评论信息',
                    content: `用户：${this.list[index].userId}<br>评论内容：${this.list[index].content}<br>所属新闻：${this.list[index].newsId}<br>评论时间：${this.list[index].date}<br>评分：${this.list[index].rate}<br>`
                })
			},
			ok () {        		
                this.$Message.info('点击了确定');

            },
            cancel () {
                this.$Message.info('点击了取消');
            }

		}
	}
</script>

<style>
	
</style>